<template>
    <view>
        <!-- components/scrollRadio/index.wxml -->
        <scroll-view :scroll-into-view="scrollIntoView" scroll-with-animation :scroll-x="true" class="root" style="white-space: nowrap">
            <view
                :id="'price' + index"
                :class="'radio-item-content ' + (selectedIndexClone == index ? 'radio-item-sel' : 'radio-item-nor')"
                :style="'margin-left: ' + (index == 0 ? '0' : '16rpx') + ';opacity:' + (!item || item.disable ? '0.4' : '1') + ';'"
                @tap="onRadioChange"
                :data-index="index"
                :data-item="item"
                v-for="(item, index) in sections"
                :key="index"
            >
                <view style="display: flex; flex-direction: column; justify-content: space-between; padding: 28rpx 20rpx">
                    <view style="color: #333333; font-size: 28rpx">
                        {{ item.title }}
                    </view>
                    <view class="flex_row" style="display: flex; align-items: baseline; justify-content: start">
                        <view style="color: #ff6700; font-weight: bolder; font-size: 28rpx">
                            <text v-if="item.disable">关闭</text>
                            <text v-else>
                                <text style="color: #ff6700; font-weight: bolder; font-size: 20rpx">¥</text>
                                <text>{{ item.value / 100 }}</text>
                            </text>
                        </view>
                    </view>
                    <image v-if="selectedIndexClone == index" class="radio-icon" src="/static/resource/image/checked.png"></image>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
// components/radio/index.js
export default {
    data() {
        return {
            selectedIndexClone: 0
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        //数据源
        sections: {
            type: Array,
            default: () => []
        },
        // 当前选中的下标
        selectedIndex: {
            type: Number,
            default: 0
        },
        // 需要滚动到的指定位置
        scrollIntoView: {
            type: String,
            default: ''
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        attached() {},

        onRadioChange(e) {
            let index = e.currentTarget.dataset.index;
            let item = e.currentTarget.dataset.item;
            if (item.disable) {
                return;
            }
            this.setData({
                selectedIndexClone: index
            });
            this.$emit('radioChange', {
                detail: {
                    index
                }
            });
        }
    },
    created: function () {},
    watch: {
        selectedIndex: {
            handler: (newVal, oldVal) => {
                // console.log("预留滚动");
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
